<script setup>
import { ref, getCurrentInstance, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { getLocalStorage, setLocalStorage } from "@/utils/common";
import RightChart from "../../components/indexRight/RightChart.vue";
import {
  createPoi,
  flyToPoiShift,
  showAttribute,
  delPoi,
  closePoiLayer,
  drawVideoRange,
  creatPoiLayer
} from "@/utils/map";
import { Search } from "@element-plus/icons-vue";
import LivePlayer from "@liveqing/liveplayer-v3";

import { pointProp } from "@/utils/pointProp";
import api from "@/api";

const { proxy } = getCurrentInstance();

const route = useRouter();

//三维初始化
onMounted(() => {
  window.sgworld = new SmartEarth.SGWorld("mapContainer", {
    url: SmartEarthRootUrl + "Workers/image/earth.jpg",
  });
  window.Viewer = sgworld._Viewer;

  sgworld.Navigate.Stop(); //取消飞行状态

  sgworld._Viewer.scene.globe.depthTestAgainstTerrain = false;
  sgworld.Viewer.scene.screenSpaceCameraController.enableTilt = false;
  sgworld._Viewer.scene.screenSpaceCameraController.maximumZoomDistance = 800000;

  var dx = {
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures: false,
  };
  sgworld.Creator.createArcGisImageryLayer(
    "ARCGIS",
    dx,
    "0",
    undefined,
    true,
    ""
  );
  showAttribute();


  api.homepage.getHomePageDevicesImpl().then((res) => {
    if (res.deviceInfos) {
      video.list = proxy._GLOBAL.DEVICEINFO = copyList = res.deviceInfos;
      setLocalStorage("device", video.list);

      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          res.projectLocation[0].longitude,
          res.projectLocation[0].latitude,
          700
        ),
      });
      //首页默认进来展示所有视频点位
      allpoiHandleClick()
    }
  });


});

const nameplate = reactive([
  {
    name: "项目名称",
    value: "",
  },
  {
    name: "项目地点",
    value: "",
  },
  {
    name: "建设单位",
    value: "",
  },
  {
    name: "施工单位",
    value: "",
  },
  {
    name: "设计单位",
    value: "",
  },
  {
    name: "项目建筑面积",
    value: "",
  },
  {
    name: "建设单位项目经理",
    value: "",
  },
  {
    name: "施工单位项目经理",
    value: "",
  },
]);

const video = reactive({
  list: [],
  torightShow: false,
  active: 0,
  itemActive: -1,
  search: "",
  realUrls: [],
});

//获取项目铭牌信息
api.homepage.getSiteNamePlate().then((res) => {
  if (res.data) {
    nameplate[0].value = res.data.projectName;
    nameplate[1].value = res.data.projectAddress;
    nameplate[2].value = res.data.constructionContractor;
    nameplate[3].value = res.data.projectContractor;
    nameplate[4].value = res.data.designContractor;
    nameplate[5].value = res.data.floorArea;
    nameplate[6].value = res.data.projectManager;
    nameplate[7].value = res.data.constructionManager;
  }
});

//获取视频列表数据

const getModule = computed(() => (item) => {
  return item === "safety"
    ? "安全"
    : item === "lean"
      ? "环境"
      : item === "buildingProgress"
        ? "进度"
        : item === "vehicle"
          ? "车辆"
          : item === "gate"
            ? "大门"
            : "--";
});

const getStatus = computed(() => (item) => {
  return item === "online" ? "在线" : item === "offline" ? "离线" : "--";
});

let copyList = [];

api.homepage
  .getLiveStreamUrl({ unionId: "648c0e6a98d7f5ecb96dfd5e" })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });



const isFullScreen = ref(false);

const isMiddleScreen = ref(true);

const isVoidScreen = ref(false);

const videoItemClick = function (index) {
  if (nameplate.active === index) return;
  video.active = index;
  video.realUrls = [];
  if (index === 0) {
    video.realUrls.forEach((item) => {
      item = "";
    });
  } else {
    const showVideo = video.list.slice(0, 6);
    showVideo.forEach((item) => {
      video.realUrls.push(item.liveStreamUrl);
    });
  }
};

const poiHandleClick = function (item, index) {
  if (index === video.itemActive) return;
  video.itemActive = index;

  //清除上一个点
  delPoi("VIDEO");
  closePoiLayer();
  if (proxy._GLOBAL.VIDEORANGE) {
    proxy._GLOBAL.VIDEORANGE.deleteObject();
    proxy._GLOBAL.VIDEORANGE = null;
  }

  //撒点
  if (!proxy._GLOBAL.poiContainer["VIDEO"]) {
    proxy._GLOBAL.poiContainer["VIDEO"] = [];
  }

  let attr = pointProp["VIDEO"].prop(item);
  attr.scale = 0.6;

  proxy._GLOBAL.SinglePointId = createPoi(attr, item.deviceInfo);

  flyToPoiShift(
    item.deviceLocation[0].longitude,
    item.deviceLocation[0].latitude,
    800,
    0
  );

  //展示弹窗内容
  closePoiLayer();
  creatPoiLayer(attr,
    [attr.x, attr.y],
    null, false
  )

  //绘制视频范围
  drawVideoRange(item.detectionCoordinates);
};

const clearHandleClick = function () {
  delPoi("VIDEO");
  closePoiLayer();
  if (proxy._GLOBAL.VIDEORANGE) {
    proxy._GLOBAL.VIDEORANGE.deleteObject();
    proxy._GLOBAL.VIDEORANGE = null;
  }
  video.itemActive = -1;
};

const toleftHandleClick = function () {
  video.torightShow = true;
  document.querySelector(".sider-l").style.transform = `translateX(-480px)`;
};

const torightHandleClick = function () {
  video.torightShow = false;
  document.querySelector(".sider-l").style.transform = `translateX(0px)`;
};

//全屏
function fullScreen() {
  if (isMiddleScreen.value) {
    //toleftHandleClick();

    document.getElementsByClassName("sider-r")[0].style.width = "100%";
    document.getElementsByClassName("rightChart")[0].style.width = "100%";

    // document.getElementsByClassName("safeModule")[0].style.justifyContent =
    //   "space-between";
    document.getElementsByClassName("safeModule")[0].style.marginBottom =
      "25px";
    document.getElementsByClassName("safeModule")[0].style.transform =
      "translateX(0%)";

    // document.getElementsByClassName("progressModule")[0].style.justifyContent =
    //   "space-between";
    document.getElementsByClassName("progressModule")[0].style.marginBottom =
      "25px";
    document.getElementsByClassName("progressModule")[0].style.transform =
      "translateX(0%)";

    // document.getElementsByClassName(
    //   "environmentModule"
    // )[0].style.justifyContent = "flex-start";
    document.getElementsByClassName("environmentModule")[0].style.marginBottom =
      "25px";
    document.getElementsByClassName("environmentModule")[0].style.transform =
      "translateX(0%)";
    isFullScreen.value = true;
    isMiddleScreen.value = false;
    isVoidScreen.value = false;
  } else if (!(isMiddleScreen.value && isFullScreen.value)) {
    // document.getElementsByClassName("safeModule")[0].style.justifyContent =
    //   "flex-start";
    document.getElementsByClassName("safeModule")[0].style.transform =
      "translateX(-25%)";
    document.getElementsByClassName("safeModule")[0].style.marginBottom = "0px";

    // document.getElementsByClassName("progressModule")[0].style.justifyContent =
    //   "flex-start";
    document.getElementsByClassName("progressModule")[0].style.transform =
      "translateX(-25%)";
    document.getElementsByClassName("progressModule")[0].style.marginBottom =
      "0px";

    // document.getElementsByClassName(
    //   "environmentModule"
    // )[0].style.justifyContent = "flex-start";
    document.getElementsByClassName("environmentModule")[0].style.transform =
      "translateX(-25%)";
    document.getElementsByClassName("environmentModule")[0].style.marginBottom =
      "0px";

    document.getElementsByClassName("sider-r")[0].style.transform =
      "translateX(0px)";
    isMiddleScreen.value = true;
    isFullScreen.value = false;
    isVoidScreen.value = false;
  }
}

//缩小
function escView() {
  if (isFullScreen.value) {
    //torightHandleClick();

    document.getElementsByClassName("sider-r")[0].style.width = "400px";
    // document.getElementsByClassName("safeModule")[0].style.justifyContent =
    //   "flex-start";
    setTimeout(() => {
      document.getElementsByClassName("safeModule")[0].style.transform =
        "translateX(-25%)";
    }, 100);
    document.getElementsByClassName("safeModule")[0].style.marginBottom = "0px";

    // document.getElementsByClassName("progressModule")[0].style.justifyContent =
    //   "flex-start";
    setTimeout(() => {
      document.getElementsByClassName("progressModule")[0].style.transform =
        "translateX(-25%)";
    }, 100);
    document.getElementsByClassName("progressModule")[0].style.marginBottom =
      "0px";

    // document.getElementsByClassName(
    //   "environmentModule"
    // )[0].style.justifyContent = "flex-start";
    setTimeout(() => {
      document.getElementsByClassName("environmentModule")[0].style.transform =
        "translateX(-25%)";
    }, 100);
    document.getElementsByClassName("environmentModule")[0].style.marginBottom =
      "0px";

    document.getElementsByClassName("rightChart")[0].style.width = "1600px";
    setTimeout(() => {
      isFullScreen.value = false;
      isMiddleScreen.value = true;
      isVoidScreen.value = false;
    }, 100);
  } else if (isMiddleScreen.value) {
    document.getElementsByClassName("sider-r")[0].style.transform =
      "translateX(400px)";
    isFullScreen.value = false;
    isMiddleScreen.value = false;
    isVoidScreen.value = true;
  }
}

const iptChangeHandle = function () {
  video.list = copyList.filter((item) => {
    return item.deviceInfo.indexOf(video.search) !== -1;
  });
};

const allpoiHandleClick = function () {
  clearHandleClick();

  //撒点
  if (!proxy._GLOBAL.poiContainer["VIDEO"]) {
    proxy._GLOBAL.poiContainer["VIDEO"] = [];
  }

  video.list.forEach((item) => {
    let attr = pointProp["VIDEO"].prop(item);
    attr.scale = 0.6;
    proxy._GLOBAL.SinglePointId = createPoi(attr, item.deviceInfo);
  });
};
</script>

<template>
  <div class="container">
    <div id="mapContainer"></div>
    <div class="sider-l">
      <div class="nameplate">
        <div class="title">
          <span>项目铭牌</span>
        </div>
        <div class="toleft" @click="toleftHandleClick"></div>
        <div class="desc">
          <div class="desc-t">项目概况</div>
          <div class="desc-item" v-for="(item, index) in nameplate" :key="index">
            <span class="name">{{ item.name }}：</span>
            <span class="value">{{ item.value || "--" }}</span>
          </div>
        </div>
      </div>
      <div class="videoMonitor">
        <div class="vm-t">
          <div class="tab-l" :class="video.active === 0 ? 'active' : ''" @click="videoItemClick(0)">
            视频列表
          </div>
          <!-- <div class="tab-r" :class="video.active === 1 ? 'active' : ''" @click="videoItemClick(1)">
            实时监控
          </div> -->
          <el-tooltip class="box-item" effect="light" content="展示所有监控点位" placement="top-start">
            <div class="setpoi" @click="allpoiHandleClick"></div>
          </el-tooltip>

          <el-tooltip class="box-item" effect="light" content="清除所有监控点位" placement="top-start">
            <div class="clear" @click="clearHandleClick"></div>
          </el-tooltip>
        </div>
        <div class="vm-b">
          <div class="vm-b-list" v-if="video.active === 0">
            <el-input v-model="video.search" class="w-50 m-2" size="small" placeholder="请输入关键字" :prefix-icon="Search"
              @change="iptChangeHandle" />
            <div class="vm-b-list-item" v-for="(item, index) in video.list" :key="index"
              :class="video.itemActive === index ? 'active' : ''" @click="poiHandleClick(item, index)">
              <div class="item-t">{{ item.deviceInfo }}</div>
              <div class="item-b">
                <div class="module">
                  <span>模块：</span>
                  <span class="value">{{ getModule(item.algorithm[0]) }}</span>
                </div>
                <div class="status">
                  <span>工作情况：</span>
                  <span class="value">{{ getStatus(item.status) }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="vm-b-real" v-else>
            <div class="videobox" v-for="(item, index) in video.realUrls" :key="index">
              <LivePlayer :videoUrl="item" fluent aspect="fullscreen" autoplay stretch live />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toright" v-show="video.torightShow" @click="torightHandleClick">
      <i></i>
    </div>
    <div class="sider-r">
      <RightChart :isFullScreen="isFullScreen" />
    </div>
    <span :class="[isVoidScreen ? 'single' : '', 'menu']">
      <span class="menuItem" @click="fullScreen" v-if="!isFullScreen">
        <img src="@/assets/images/index/left1.png" />
      </span>
      <span class="menuItem" @click="escView" v-if="!isVoidScreen">
        <img src="@/assets/images/index/right1.png" />
      </span>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  font-family: SourceHanSansSC;
  position: relative;
  color: #656565;

  #mapContainer {
    width: 100%;
    position: relative;
  }

  >div {
    width: 400px;
    height: calc(100vh - 75px);
    position: absolute;
    top: 0px;
    z-index: 9;
  }

  .toright {
    width: 40px;
    height: 40px;
    background: #fcfbfe;
    box-shadow: 0px 0px 3px 0px #eceefc;
    cursor: pointer;
    position: absolute;
    top: 10px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 9;

    i {
      display: inline-block;
      width: 18px;
      height: 18px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("@/assets/images/project/toright.png");
      margin: 10px;
    }
  }

  .sider-l {
    left: 0px;
    transition: transform 0.2s ease-in;

    .nameplate {
      width: 100%;
      height: 300px;
      background: #fcfbfe;
      border-right: 1px solid #eef3fd;
      border-bottom: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 2px;
      position: relative;
      z-index: 10;

      .toleft {
        position: absolute;
        right: 20px;
        top: 0px;
        width: 18px;
        height: 18px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/project/toleft.png");
        cursor: pointer;
      }

      .title {
        width: 100%;
        height: 20px;
        border-left: 3px #8f93f7 solid;
        font-weight: bold;
        padding-left: 10px;
        margin-left: 10px;
      }

      .desc {
        width: 92%;
        height: 255px;
        margin: 10px 0px 0px 10px;
        border: 1px solid #dce3ef;
        box-shadow: 2px 2px 4px 0px #eceefc;
        border-radius: 6px;
        text-indent: 10px;
        padding: 10px;
        box-sizing: border-box;

        .desc-t {
          font-weight: bold;
          color: #6e91fb;
          margin-bottom: 10px;
        }

        .desc-item {
          width: 100%;
          margin-bottom: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .value {
            color: #f2ac18;
          }
        }
      }
    }

    .videoMonitor {
      width: 100%;
      height: calc(100vh - 365px);
      background: #fcfbfe;
      border-right: 1px solid #eef3fd;
      border-bottom: 1px solid #eef3fd;
      box-shadow: 0px 0px 4px 0px #eceefc;
      border-radius: 2px;
      margin-top: 10px;

      position: relative;

      .vm-t {
        width: 100%;
        height: 40px;
        overflow: hidden;
        padding-top: 10px;

        .tab-l,
        .tab-r {
          width: 90px;
          height: 30px;
          border-radius: 4px;
          border: 1px solid #c4c4c4;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          float: left;
          margin-left: 10px;

          &.active {
            background: #8f93f7;
            color: #ffffff;
          }
        }

        .clear {
          float: left;
          width: 24px;
          height: 25px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/project/clear.png");
          cursor: pointer;
          margin: 5px 0px 0px 10px;
        }

        .setpoi {
          float: left;
          width: 24px;
          height: 25px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/project/video.png");
          cursor: pointer;
          margin: 3px 0px 0px 25px;
        }
      }

      .vm-b {
        width: 97%;
        padding: 0px 10px;
        box-sizing: border-box;
        overflow: auto;
        height: calc(100vh - 440px);

        .vm-b-list {
          width: 100%;

          :deep .el-input {
            margin-bottom: 10px;
          }

          .vm-b-list-item {
            width: 100%;
            height: 60px;
            box-shadow: 1px 2px 2px 0px rgba(127, 158, 191, 0.16);
            border-radius: 4px;
            margin-bottom: 10px;
            background: #8f93f7;
            color: #ffffff;
            text-indent: 10px;
            cursor: pointer;

            .item-t {
              width: 90%;
              height: 35px;
              line-height: 35px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .item-b {
              font-size: 12px;
              display: flex;

              .module {
                margin-right: 20px;
              }
            }

            &.active {
              background: #f8c747;
            }
          }
        }

        .vm-b-real {
          .videobox {
            width: 47%;
            height: 130px;
            position: relative;
            float: left;
            margin: 10px 5px 0px 0px;

            video {
              width: 100%;
              height: 100%;
            }

            :deep .webrtc {
              .webRtcPlayerBox {
                height: 260px !important;
              }
            }
          }
        }
      }
    }
  }

  .sider-r {
    right: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    transition: all 0.2s ease-in;
  }

  .menu {
    display: block;
    position: absolute;
    top: -5px;
    right: 0px;
    z-index: 99;

    .menuItem {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      background-color: white;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;

      img {
        width: 18px;
        height: 18px;

        padding: 10px;
        cursor: pointer;
      }
    }
  }

  .single {
    top: 10px !important;

    .menuItem {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
